<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="home">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '首页',
  },
}
</route>
<template>
  <view class="overflow-hidden p-2 contarnier" :style="{ marginTop: safeAreaInsets?.top + 'px' }">
    <wd-card class="custtom_card">
      <view class="flex justify-center mt-6">
        <wd-text color="black" size="24px" text="16354.156" mode="price" bold prefix="￥" />
      </view>

      <template #title>
        <view style="display: flex; align-items: center; width: 100%; justify-content: center">
          <wd-text type="primary" text="今日总收益"></wd-text>
          <wd-icon class="ml-1" name="refresh1" size="20px" color="#4d80f0"></wd-icon>
        </view>
      </template>
    </wd-card>

    <wd-notice-bar
      text="这是一条消息提示信息，这是一条消息提示信息，这是一条消息提示信息"
      prefix="warn-bold"
      class="mt-2"
    />

    <wd-row :gutter="20" class="mt-2 h-200px" style="padding: 0; margin-left: 0; margin-right: 0">
      <wd-col :span="12" style="padding-left: 0">
        <view class="h-200px" style="position: relative" @click="goToDeviceCenter">
          <image src="@/static/home/Group 2678.png" style="width: 100%; height: 100%" />

          <view
            style="position: absolute; left: 10px; top: 10px; display: flex; flex-direction: column"
          >
            <wd-text text="设备中心" size="16px" color="#3dd1ff"></wd-text>
            <wd-text text="共 5 台" size="12px" color="#3dd1ff" class="mt-1"></wd-text>
          </view>
        </view>
      </wd-col>
      <wd-col
        :span="12"
        style="display: flex; flex-direction: column; justify-content: space-between; height: 100%"
      >
        <view class="h-95px" style="position: relative" @click="goToShopReport">
          <image src="@/static/home/Group 2679.png" style="width: 100%; height: 100%" />

          <view
            style="position: absolute; left: 10px; top: 10px; display: flex; flex-direction: column"
          >
            <wd-text text="门店报表" size="16px" color="#1890ff"></wd-text>
            <wd-text text="门店数据统计" size="12px" color="#1890ff" class="mt-1"></wd-text>
          </view>
        </view>

        <view class="h-95px" style="position: relative">
          <image src="@/static/home/Group 2680.png" style="width: 100%; height: 100%" />

          <view
            style="position: absolute; left: 10px; top: 10px; display: flex; flex-direction: column"
          >
            <wd-text text="用户资料" size="16px" color="#16ac65"></wd-text>
            <wd-text text="今日0/共1个" size="12px" color="#16ac65" class="mt-1"></wd-text>
          </view>
        </view>
      </wd-col>
    </wd-row>

    <view class="mt-4" style="border-radius: 10px; background-color: white">
      <wd-grid :column="4" clickable style="border-radius: 10px">
        <wd-grid-item
          icon-size="35px"
          custom-class="custom-item"
          use-icon-slot
          icon="picture"
          text="设备注册"
        >
          <template #icon>
            <image style="width: 35px; height: 35px" src="@/static/home/Group 2681.png" />
          </template>
        </wd-grid-item>
        <!-- <wd-grid-item icon-size="35px" use-icon-slot icon="picture" text="套餐设置">
          <template #icon>
            <image style="width: 35px; height: 35px" src="@/static/home/Group 2682.png" />
          </template>
        </wd-grid-item> -->
        <wd-grid-item icon-size="35px" use-icon-slot icon="picture" text="订单查询">
          <template #icon>
            <image style="width: 35px; height: 35px" src="@/static/home/Group 2683.png" />
          </template>
        </wd-grid-item>
        <!-- <wd-grid-item icon-size="35px" use-icon-slot icon="picture" text="远程补币">
          <template #icon>
            <image style="width: 35px; height: 35px" src="@/static/home/Group 2684.png" />
          </template>
        </wd-grid-item> -->
        <wd-grid-item
          icon-size="35px"
          use-icon-slot
          icon="picture"
          text="营业汇总"
          @itemclick="goBusinessSummary"
        >
          <template #icon>
            <image style="width: 35px; height: 35px" src="@/static/home/password.png" />
          </template>
        </wd-grid-item>
        <wd-grid-item icon-size="35px" use-icon-slot icon="picture" text="修改密码">
          <template #icon>
            <image style="width: 35px; height: 35px" src="@/static/home/pie_chart_128px.png" />
          </template>
        </wd-grid-item>
      </wd-grid>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { TestEnum } from '@/typings'
defineOptions({
  name: 'Home',
})

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
const author = ref('菲鸽')
const description = ref(
  'unibest 是一个集成了多种工具和技术的 uniapp 开发模板，由 uniapp + Vue3 + Ts + Vite4 + UnoCss + UniUI + VSCode 构建，模板具有代码提示、自动格式化、统一配置、代码片段等功能，并内置了许多常用的基本组件和基本功能，让你编写 uniapp 拥有 best 体验。',
)
// 测试 uni API 自动引入
onLoad(() => {
  console.log(author)
  console.log(TestEnum.A)
})

const goToDeviceCenter = () => {
  uni.navigateTo({
    url: '/pages/index/device/index',
  })
}

const goToShopReport = () => {
  uni.navigateTo({
    url: '/pages/index/shopReport/index',
  })
}

const goBusinessSummary = () => {
  uni.navigateTo({
    url: '/pages/index/businessSummary/index',
  })
}
</script>

<style>
/* 当前页面的page高度是100% */
.contarnier {
  height: 100%;
}

.main-title-color {
  color: #d14328;
}

.custtom_card {
  margin: 0 !important;
}

:deep(.custom-item) {
  text-align: center !important;

  display: flex;
  flex-direction: column;
}
</style>
